<template>
	<view class="page">
		<u-navbar :border-bottom='false' title-bold="true" style="font-weight: 1200;"  title="修改密码">
		</u-navbar>
		<u-toast ref="uToast" />
		<view class="code-get" v-if="!isSetting">
			<view class="phone">
				<text>请输入{{phone}}短信验证码</text>
			</view>
			<view class="code">
				<input type="tel" maxlength="6" v-model="form.code" placeholder="请输入短信验证码"/>
				<view class="wrap">
						<u-toast ref="uToast"></u-toast>
						<u-verification-code :seconds="seconds" ref="uCode" 
						@change="codeChange"></u-verification-code>
						<u-button size="mini" @click="getCode">{{tips}}</u-button>
					</view>
			</view>
			<view class="btn" @click="submit1()">
				<text>下一步</text>
			</view>
		</view>
		<view class="setting-password" v-else>
			<view class="inpu-password">
				<text>设置密码</text>
				<input type="password" v-model="form.password" placeholder="请输入要设置的密码" />
				<text class="iconfont icon-eye-on icon"></text>
			</view>
			<view class="btn" @click="submit2()">
				<text>确认</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				isSetting: false,
				form:{},
				tips: '',
				seconds: 60,
			
			};
		},
		onShow() {
			this.$u.api.getPhone().then(res=>{
				this.phone=res
				if(res==""){
					
				}
			})
		},
		methods:{
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					this.$refs.uCode.start();
					this.$u.api.userPhoneCaptcha().then(res=>{
						this.$u.toast('验证码已发送');
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
						
			submit1(){
				this.$u.api.updatePassword(this.form).then(res=>{
					this.isSetting=true
				})
			},
			submit2(){
				this.$u.api.updatePassword(this.form).then(res=>{
					this.$refs.uToast.show({
						title: '密码修改成功',
						duration:500,
						type: 'success',
						back:true
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'changePassword.scss';
</style>
